<template>
  <transition
    @before-enter="handleBeforeEnter"
    @enter="handleEnter"
    @after-enter="handleAfterEnter"
    @before-leave="handleBeforeLeave"
    @leave="handleLeave"
    @after-leave="handleAfterLeave"
    :css="false"
  >
    <slot></slot>
  </transition>
</template>

<script>
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui.js'
export default {
  name: 'InteractionRouter',
  methods: {
    handleBeforeEnter (el) {
      // console.log('即将执行动画')
    },
    handleEnter (el, done) {
      el.style.display = 'none'
      Velocity(el, 'stop')
      Velocity(el, 'transition.expandIn', {duration: 600, delay: 600})
      // console.log('显示动画执行中...')
    },
    handleAfterEnter (el) {
      // console.log('显示动画结束')
    },
    handleBeforeLeave (el) {
      // console.log('隐藏动画即将执行')
    },
    handleLeave (el, done) {
      Velocity(el, 'stop')
      Velocity(el, 'transition.shrinkOut', {duration: 600})
      // console.log('隐藏动画执行中...')
    },
    handleAfterLeave (el) {
      // console.log('隐藏动画结束')
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
